<%--
  Created by IntelliJ IDEA.
  User: chen3
  Date: 2021-08-16
  Time: 12:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户列表</title>
    <link href="${pageContext.request.contextPath}/jquery/jquery.dataTables.min.css">
    <link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/jquery/jquery-3.3.1.js"></script>
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/jquery/jquery.dataTables.min.js"></script>
</head>
<body>
    <div class="page-container" style="margin: 50px;">
        <h3 align="center">用户列表</h3>
        <table class="table" id="user_table">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>头像</th>
                    <th>用户名</th>
                    <th>昵称</th>
                    <th>密码</th>
                    <th>手机号</th>
                    <th>邮箱</th>
                    <th>性别</th>
                    <th>地址</th>
                    <th>账户余额</th>
                    <th>角色</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <c:forEach items="${users}" var="one" varStatus="sta">
                    <tr>
                        <td>${sta.index+1}</td>
                        <td><img width="50px" height="50px" src="${pageContext.request.contextPath}/img/${one.headerImg}"/></td>
                        <td>${one.username}</td>
                        <td>${one.name}</td>
                        <td>${one.password}</td>
                        <td>${one.phone}</td>
                        <td>${one.email}</td>
                        <td>${one.sex}</td>
                        <td>${one.address}</td>
                        <td>${one.balance}</td>
                        <td>
                            <select class="form-control" id="selected_${sta.index+1}">
                                <c:forEach items="${roles}" var="role">
                                    <c:choose>
                                        <c:when test="${one.role.roleId == role.roleId}">
                                            <option selected value="${role.roleId}">${role.roleName}</option>
                                        </c:when>
                                        <c:otherwise>
                                            <option value="${role.roleId}">${role.roleName}</option>
                                        </c:otherwise>
                                    </c:choose>
                                </c:forEach>
                            </select>
                        </td>
                        <td>
                            <a class="btn btn-warning" href="javascript:;" onclick="edit('${one.username}','${sta.index+1}')">修改用户权限</a>
                        </td>
                    </tr>
                </c:forEach>
            </tbody>
            <tfoot>
                <tr>

                </tr>
            </tfoot>
        </table>
    </div>
<script>
    function edit(username,Id) {
        const roleId = $("#selected_"+Id+"").val();
        $.ajax({
            url:'${pageContext.request.contextPath}/user/modifyRole',
            dataType:'json',
            data:{
                username:username,
                roleId:roleId
            },
            success:function (data) {
                if(data.code === 1 ){
                    layer.msg("修改成功！");
                    location.href = "";
                }else {
                    layer.msg("修改失败！");
                }
            }
        });
    }
    $(document).ready( function () {
        $('#user_table').DataTable();
    });
</script>
</body>
</html>
